<template>
  <div class="box">
    <el-form ref="form" :model="form" size="small" label-width="135px">
      <el-form-item label="容器权重">
        <el-input v-model.number="form.CpuShares" type="number" style="width: 50%;"></el-input>
        <span class="tishi">相对于其他容器对于CPU的权重</span>
      </el-form-item>
      <el-form-item label="Oom Killer">
        <el-switch v-model="form.OomKillDisable"></el-switch>
      </el-form-item>
      <el-form-item label="调整PID限制">
        <el-input v-model.number="form.PidsLimit" type="number"  style="width: 50%;"></el-input>
        <span class="tishi">0或-1为无限</span>
      </el-form-item>
      <el-form-item label="DeviceCgroupRules">
        <el-input v-model="form.DeviceCgroupRules" style="width: 50%;"></el-input>
        <span class="tishi">当前容器的规则组</span>
      </el-form-item>
      <el-form-item label="资源限制">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort">添加</el-button>
      </el-form-item>
      <el-form-item label="" prop="Ulimits" v-for="(item, index) in portNum" :key="item">
        <el-input placeholder="请输入name" v-model="form.Ulimits[index].Name" style="width: 29%;">
          <template slot="prepend">Name</template>
        </el-input>
        <el-input placeholder="请输入Soft" v-model="form.Ulimits[index].Soft" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">Soft</template>
        </el-input>
        <el-input placeholder="请输入Hard" v-model="form.Ulimits[index].Hard" style="width: 29%;margin-left: 10px;">
          <template slot="prepend">Hard</template>
        </el-input>
        <el-button @click="delPort(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>
      <el-form-item label="IOMaximumIOps">
        <el-input v-model.number="form.IOMaximumIOps" type="number" style="width: 50%;"></el-input>
        <span class="tishi">仅windows，单位：IO/S</span>
      </el-form-item>
      <el-form-item label="MaxBandwidth">
        <el-input v-model.number="form.IOMaximumBandwidth" type="number" style="width: 50%;"></el-input>
        <span class="tishi">仅windows，单位：字节/S</span>
      </el-form-item>
      <el-form-item label="BlkioWeight">
        <el-input v-model.number="form.BlkioWeight" type="number" min="0" max="1000" style="width: 50%;"></el-input>
        <span class="tishi">相对权重，0-1000</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        CpuShares: null,
        OomKillDisable: false,
        PidsLimit: null,
        DeviceCgroupRules: '',
        Ulimits: [],
        IOMaximumIOps: '',
        IOMaximumBandwidth: '',
        BlkioWeight: null
      },
      portNum: [],
      i: 0
    }
  },
  props: ['item'],
  watch: {
    // 数据回填
    item: function () {
      if (this.item) {
        this.form.CpuShares = this.item.HostConfig.CpuShares
        this.form.OomKillDisable = this.item.HostConfig.OomKillDisable
        this.form.PidsLimit = this.item.HostConfig.PidsLimit
        this.form.DeviceCgroupRules = this.item.HostConfig.DeviceCgroupRules
        this.form.Ulimits = this.item.HostConfig.Ulimits ? this.item.HostConfig.Ulimits : [] // 可能会报错
        this.form.IOMaximumIOps = this.item.HostConfig.IOMaximumIOps
        this.form.IOMaximumBandwidth = this.item.HostConfig.IOMaximumBandwidth
        this.form.BlkioWeight = this.item.HostConfig.BlkioWeight
      }
    },
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$emit('data', ['Con', this.form])
      }
    }
  },
  methods: {
    // 添加开放端口的input框
    addPort () {
      this.portNum.push(this.i)
      this.form.Ulimits.push({ Name: '', Soft: '', Hard: '' })
      this.i++
    },
    // 删除开放端口的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.form.Ulimits.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.tishi{
  font-size: 12px;
  color: #ccc;
  padding-left: 10px;
}
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
</style>
